<template>
	<view class="container">
		<!-- 头部导航栏 + 背景颜色 + 定位 -->
		<view class="title-box" :style="{ height: barHeight + 'px' }">
			<!-- 定位 -->
			<view class="location"
				:style="{  height: navObj + 'px', width: 'auto',marginTop: navTop + 'px',  marginLeft: navLeft + 'px'  }"
				@click.stop="changeAddressHandle">
				<image src="../../static/images/dw.png" style="width: 41rpx;height: 50rpx;" />
				<view style="margin-left: 20rpx;">
					{{ currentCity || '定位中...' }}
					<text v-if="loading" style="margin-left: 10rpx;">...</text>
				</view>
				<view class="triangle"></view>
			</view>
			<!-- 占位的盒子 -->
			<view :style="{ width: '30rpx', marginTop: navTop + 'px',marginRight: navObjWid + 'px'}"></view>
		</view>

		<!-- 下面的内容 -->
		<view class="content-box" :style="{top:barHeight +'px',paddingLeft:navLeft + 'px'}">
			<view>地址：{{ address }}</view>
			<view>城市：{{ currentCity }}</view>
			<view>时间：{{ nowTime }}</view>
			<view class="btn" @click="back">返回</view>
		</view>


		<!-- 错误提示 -->
		<view v-if="error" class="error-message">
			{{ error }}
		</view>
	</view>
</template>

<script>
	import QQMapWX from "@/common/qqmap-wx-jssdk.js";
	export default {
		data() {
			return {
				// 导航栏相关
				navTop: this.capsuleTop,
				navObj: this.capsuleHeight,
				navObjWid: this.capsuleWidth,
				navLeft: this.capsuleLeft,
				barHeight: this.barHeight + 1,
				// 地图相关
				key: 'ZGWBZ-RU475-RRPIC-ILOW4-6COQ6-U7BIQ', // 腾讯地图key
				address:'',
				currentCity: '',
				nowTime:'',

				// 状态
				loading: false,
				error: null
			}
		},
		onLoad() {

		},
		onShow() {
			// 优先从缓存中读取市区信息
			this.getTime();
			const cachedCity = uni.getStorageSync('currentCity');
			const cachedAddress = uni.getStorageSync('address');
			if (cachedCity && cachedAddress) {
				this.currentCity = cachedCity;
				this.address = cachedAddress;
			} else {
				this.getAddressHandle();
			}
		},
		methods: {
			/**
			 * 获取位置
			 */
			getAddressHandle() {
				var qqmapsdk;
				var that = this;
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);

						qqmapsdk = new QQMapWX({
							key: that.key //自己申请的key
						});
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: res.latitude,
								longitude: res.longitude
							},
							success(addressRes) {
								console.log('位置111：', addressRes)
								that.address = addressRes.result.address;
								that.currentCity = addressRes.result.address_component.city;
								uni.setStorageSync('currentCity',that.currentCity)
								uni.setStorageSync('address',that.address)
							},
							fail(res) {}
						});
					}
				});
			},
			/**
			 * 时间
			 */
			getTime: function() {
				var date = new Date(),
					year = date.getFullYear(),
					month = date.getMonth() + 1,
					day = date.getDate(),
					hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
					minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
					second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				var timer = year + '年' + month + '月' + day + '日' + hour + ':' + minute + ':' + second;
				this.nowTime = timer;

				console.log('获取时间', this.nowTime);
			},

			/**
			 * 返回上一页
			 */
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			changeAddressHandle(){
				uni.navigateTo({
					url:'/subPages/changeCity/changeCity'
				})
			}


		}
	}
</script>

<style scoped>
	@import './address.css'
</style>